<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        span {
            display: inline-block;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: red;
            line-height: 100px;
            text-align: center;
            font-size: 50px;
            color: #fff
        }
        
        span.blue {
            background-color: blue;
        }
        
        button {
            width: 100px;
            height: 30px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span class="blue">6</span>
    <span class="blue">7</span>
    <button id="startBtn">开始</button>
    <button id="stopBtn">停止</button>


    <script>
        let spanBlue = document.querySelectorAll("span.blue");
        let spanRed = document.querySelectorAll("span:not(.blue)");
        let timer;

        startBtn.onclick = function() {
            if (timer) {
                clearInterval(timer)
            }
            timer = setInterval(function() {
                setInnerHTML(spanBlue);
                setInnerHTML(spanRed);
            }, 100)
        }

        function setInnerHTML(ele) {
            let newArr = []
            for (var i = 0; i < ele.length; i++) {
                let countNum = ele[i].className == "blue" ? 12 : 35;
                let num = Math.floor(Math.random() * countNum + 1);
                if (newArr.indexOf(num) > -1) {
                    i--;
                }
                newArr.push(num)
            }

            let arr = newArr.sort(function(a, b) {
                return a - b
            }).filter((item, index, obj) => {
                return obj.indexOf(item) === index;
            })

            ele.forEach((item, index) => {
                item.innerHTML = arr[index]
            });
        }

        stopBtn.onclick = function() {
            clearInterval(timer)
        }


        // let newArr = [];
        // let newArr2 = [];
        // for (var i = 0; i < 5; i++) {
        //     let num = Math.floor(Math.random() * 35 + 1);
        //     if (newArr.indexOf(num) > -1) {
        //         i--;
        //     }
        //     newArr.push(num)
        // }

        // for (var j = 0; j < 2; j++) {
        //     let num = Math.floor(Math.random() * 12 + 1);
        //     if (newArr2.indexOf(num) > -1) {
        //         j--;
        //     }
        //     newArr2.push(num)
        // }
        // console.log(newArr2)

        // spanBlue.forEach((item, index) => {
        //     item.innerHTML = newArr2[index]
        // })

        // spanRed.forEach((item, index) => {
        //     item.innerHTML = newArr[index]
        // })
    </script>

</body>

</html>